<template>
	<up-sticky>
		<!-- #ifdef MP-WEIXIN -->
		<view class="navigator_header display_flex" :style="{'marginTop':navHeight+'px'}">
		<!-- #endif -->
			<!-- #ifndef MP-WEIXIN -->
			<view class="navigator_header display_flex">
			<!-- #endif -->
				<view class="navigator_left" style="margin-left: 32rpx">
					<image style="width: 64rpx; height: 64rpx" @click="goBack"
						src="http://112.124.50.179:8888/imgs/home/poster_return.png" mode=""></image>
				</view>
				<view class="navigator_middle"></view>
				<view class="navigator_right" @click="openShare" style="margin-right: 32rpx">
					<image src="http://112.124.50.179:8888/imgs/home/poster_more.png" mode="" style="width: 64rpx; height: 64rpx; float: right">
					</image>
				</view>
			</view>
	</up-sticky>
	<image class="bgc" src="http://112.124.50.179:8888/imgs/home/bgc1.png"></image>

	<view class="poster_avater">
		<image class="avater_border" src="http://112.124.50.179:8888/imgs/home/poster_border.png"></image>
		<image :src="formData.decedentHeadUrl" mode="" class="deadee_avater"></image>
		<image src="http://112.124.50.179:8888/imgs/home/poster_top.png" mode="" class="decoration_top"></image>
		<image src="http://112.124.50.179:8888/imgs/home/poster_bottom.png" mode="" class="decoration_bottom"></image>
	</view>
	<view class="poster_title">讣告追思</view>
	<view class="poster_content">
		{{formData.decedentTitle}}{{formData.decedentName}}于{{formData.decedentTime}}在{{formData.decedentAddr}}逝世，享年{{formData.decedentAge}}岁。兹定于{{formData.mournTime}}，在{{formData.mournAddr}}设奠追思。
		<view>敬请亲朋好友前来送别。</view>
		<view>敬上。</view>
		<view style="text-align: right; margin-top: 40rpx">{{formData.familyName}}</view>
		<view style="text-align: right">{{formData.familyPhone}}</view>
		<view style="text-align: right">{{formData.time}}</view>
	</view>

	<view class="poster_footerFixed" @click="goMourn">
		<view class="poster_btn">
			<image class="decoration" src="http://112.124.50.179:8888/imgs/home/butterfly.png"></image>
			<image src="http://112.124.50.179:8888/imgs/home/littleMan.png" mode=""></image>
			去悼念
		</view>
	</view>


	<sharePopup v-model:show="showShare" title="更多" height="592rpx" :isReport='true' :isDel='true' :delId='""'
		:reportedId='obituaryId' :reportType='"10"' :bgColor='"#fff"' :fontColor='"black"'></sharePopup>

	<!-- 选择纪念馆弹框 -->
	<popupCompVue v-model:show="memoryHallPopup.show" title="选择一个纪念馆" bgColor="#1E201F" fontColor="#fff">
		<view class="memorialList" :style="{height:memoryHallPopup.memorialList.length == 0?'516rpx':'900rpx'}">
			<mescroll-uni :down="downOption" :up="upOption" @init="mescrollInit" @down="downCallback" @up="upCallback"
				:height='memoryHallPopup.memorialList.length == 0?"516rpx":"900rpx"'>
				<view v-if="memoryHallPopup.memorialList.length == 0&&isBand==0" class="memory_empty">
					<image src="http://112.124.50.179:8888/imgs/home/poster_empty.png" mode=""></image>
					<view>无可选纪念馆哦</view>
				</view>
				<!-- 		<view v-if="memoryHallPopup.memorialList.length == 0&&isBand>0" class="memory_empty">
					<image src="http://112.124.50.179:8888/imgs/home/poster_empty.png" mode=""></image>
					<view>已绑定纪念馆</view>
				</view> -->
				<view v-else>
					<view class="memory" v-for="(item, index) in memoryHallPopup.memorialList">
						<view class="display_flex" v-for="ele,i in item.peopleList">
							<image :src="ele.imageUrl" mode=""></image>
							<view class="name singleLineOverflowHidden">{{ele.name}}</view>
						</view>
						<image v-if="memoryHallPopup.choosedMemo == item" class="selectIcon"
							src="http://112.124.50.179:8888/imgs/home/selected.png" mode=""></image>
						<image v-else class="selectIcon" src="http://112.124.50.179:8888/imgs/home/no-select.png" mode=""
							@click="chooseMemory(item)"></image>
					</view>
				</view>
			</mescroll-uni>
		</view>
		<footerBtn v-if="memoryHallPopup.memorialList.length == 0&&isBand==0" bgcColor="#1E201F" name="创建纪念馆"
			@clickBtn="goCreate">
			<image class="add_memory_image" src="http://112.124.50.179:8888/imgs/home/add_memory.png" mode=""></image>
		</footerBtn>
		<footerBtn v-if="memoryHallPopup.memorialList.length != 0&&isBand==0" bgcColor="#1E201F" name="确定"
			@clickBtn="confirmCall">
		</footerBtn>
	</popupCompVue>

	<!-- 删除模态框 -->
	<myModel v-model:show="modelData.show" :title="modelData.title" :content="modelData.content"
		:confirmText="modelData.confirmText" :cancelText="modelData.cancelText" @cancel="cancelModel"
		@confirm="goUrl('/subPages/home/memoryHall/index')">
		<view class="model_content">
			纪念馆可以给ta上香、祈福祭品、留言，
			<br />
			以寄托对亲人的思念
		</view>
	</myModel>
</template>

<script setup>
	import {
		timeFormat
	} from '@/node_modules/uview-plus';
	import {
		ref,
		reactive
	} from 'vue';
	import {
		onReady,
		onShow,
		onLoad,
		onPageScroll,
		onReachBottom
	} from '@dcloudio/uni-app';
	import useMescroll from "@/uni_modules/mescroll-uni/hooks/useMescroll.js";
	import popupCompVue from '/components/popup/index.vue';
	import myModel from '/components/model/index.vue';
	import footerBtn from '/components/footerBtn/index.vue';
	import sharePopup from '/components/popup/share.vue';
	import HomeApi from '@/API/home/index.js'
	const homeApi = new HomeApi();
	onLoad((o) => {
		if (o.formData) {
			formData.value = JSON.parse(o.formData)
			formData.value.time = timeFormat(new Date().getTime(), 'yyyy-mm-dd')
			formData.value.time = formatDate(formData.value.time)
			formData.value.decedentTime = formatDate(formData.value.decedentTime)
			formData.value.mournTime = formatDate(formData.value.mournTime)
			obituaryId.value = o.id
			query()
		}
	})
	const {
		getMescroll,
		mescrollInit
	} = useMescroll() // 调用mescroll的hook
	//翻页信息
	const downOption = ref({
		auto: false
	});
	const upOption = ref({
		auto: false,
		empty: false,
	});


	const navHeight = getApp().globalData.navHeight;

	//分享弹框
	const showShare = ref(false);
	//删除模态框
	const modelData = reactive({
		show: false,
		title: '创建馆',
		confirmText: '创建纪念馆',
		cancelText: '已有纪念馆,去绑定'
	});
	//选择纪念馆
	const memoryHallPopup = reactive({
		show: false,
		choosedMemo: '',
		memorialList: []
	});

	const formData = ref({})
	const latestId = ref({})
	const obituaryId = ref({})
	const publisherId = ref({})
	const isBand = ref({})
	const goUrl = (url) => {
		uni.navigateTo({
			url: url
		});
	};

	function formatDate(dateString) {
		const date = new Date(dateString);
		const year = date.getFullYear();
		const month = date.getMonth() + 1;
		const day = date.getDate();
		return `${year}年${month}月${day}日`;
	}
	/**
	 * 点击右上角分享
	 */
	const openShare = () => {
		showShare.value = true;
	};

	/**
	 * 分享到微信
	 */
	const shareWx = () => {
		uni.share({
			provider: 'weixin',
			scene: 'WXSceneSession',
			type: 0,
			href: 'http://uniapp.dcloud.io/',
			title: 'uni-app分享',
			summary: '我正在使用HBuilderX开发uni-app，赶紧跟我一起来体验！',
			imageUrl: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/uni@2x.png',
			success: function(res) {
				console.log('success:' + JSON.stringify(res));
			},
			fail: function(err) {
				console.log('fail:' + JSON.stringify(err));
				uni.showToast({
					title: err.errMsg,
					icon: 'none'
				});
			}
		});
	};

	/**
	 * 分享到朋友圈
	 */
	const shareFriendCircle = () => {
		uni.share({
			provider: 'weixin',
			scene: 'WXSceneTimeline',
			type: 0,
			href: 'http://uniapp.dcloud.io/',
			title: 'uni-app分享',
			summary: '我正在使用HBuilderX开发uni-app，赶紧跟我一起来体验！',
			imageUrl: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/uni@2x.png',
			success: function(res) {
				console.log('success:' + JSON.stringify(res));
			},
			fail: function(err) {
				console.log('fail:' + JSON.stringify(err));
			}
		});
	};

	/**
	 * 举报
	 */
	const report = () => {
		uni.navigateTo({
			url: '/subPages/chaoshan/report',
			success: () => {
				showShare.value = false;
			}
		});
	};

	/**
	 * 删除
	 */
	const del = () => {
		modelData.show = true;
	};
	const query = () => {
		homeApi.queryBituaryApi({
			id: obituaryId.value
		}).then((res) => {
			publisherId.value = res.data.obituary.publisherId
			isBand.value = res.data.obituary.memorialId
		}).catch(() => {})
	}
	const goMourn = () => {
		if (isBand.value > 0) {
			uni.setStorageSync('memorialId', isBand.value)
			goUrl('/subPages/home/memoryHall/cemetery')
		} else {
			memoryHallPopup.show = true;
			setTimeout(() => {
				latestId.value = 0
				getMescroll().resetUpScroll()
			}, 1)
		}
		// goUrl('/subPages/home/memoryHall/detail')
	};
	const goCreate = () => {
		memoryHallPopup.show = false
		goUrl('/subPages/home/memoryHall/index')
	}
	const chooseMemory = (item) => {
		memoryHallPopup.choosedMemo = item;
	};
	const confirmCall = (() => {
		homeApi.bindmemorialBituaryApi({
			obituaryId: obituaryId.value,
			memorialId: memoryHallPopup.choosedMemo.memorialId
		}).then((res) => {
			uni.showToast({
				icon: 'none',
				title: '绑定纪念馆成功！',
				duration:1000
			})
			setTimeout(()=>{
				uni.setStorageSync('memorialId', memoryHallPopup.choosedMemo.memorialId)
				goUrl('/subPages/home/memoryHall/cemetery')
			},1000)
			
			// latestId.value = 0
			// getMescroll().resetUpScroll()
			memoryHallPopup.show = false
			query()
		}).catch(() => {})
	})
	const goBack = () => {
		uni.navigateBack();
	};

	const downCallback = (mescroll) => {
		latestId.value = 0
		getMescroll().resetUpScroll()
	}
	const upCallback = (mescroll) => {
		homeApi.getMemorialListToObituaryApi({
			obituaryPublisherId: publisherId.value,
			latestId: latestId.value
		}).then((res) => {
			const curPageData = res.data.memorialList || [] // 当前页数据
			if (latestId.value == 0) memoryHallPopup.memorialList = []
			memoryHallPopup.memorialList = memoryHallPopup.memorialList.concat(curPageData)
			if (curPageData.length) {
				latestId.value = curPageData[curPageData.length - 1].memorialId || 0;
			}
			mescroll.endSuccess(curPageData.length); // 请求成功, 结束加载

		}).catch(() => {
			mescroll.endErr(); // 请求失败, 结束加载
		})
	}
</script>

<style lang="scss">
	page {
		padding: 0;
		overflow: hidden;
	}

	.content {
		padding: 0;
	}

	.navigator_header {
		width: 100%;
		/* #ifdef APP || H5 */
		height: 88rpx;
		/* #endif */
		/* #ifdef MP-WEIXIN */
		height: 80rpx;
		/* #endif */
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		align-items: center;

		.navigator_left,
		.navigator_right {
			flex: 2;
		}

		.navigator_middle {
			flex: 5;
			flex-shrink: 0;
		}

		.navigator_left .btn-back {
			width: 80rpx;
			height: 60rpx;
			line-height: 60rpx;
			font-size: 28rpx;
			font-weight: normal;
			padding: 0;
			background: none;
		}

		.navigator_middle .navigator_title {
			width: 100%;
			text-align: center;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			margin: 0 auto;
			font-weight: 400;
			font-size: 32rpx;
			line-height: 32rpx;
		}
	}

	.bgc {
		width: 100vw;
		height: 100vh;
		position: fixed;
		top: 0;
		left: 0;

		@media screen and (min-width: 992px) {
			width: 828rpx;
			margin: 0 auto;
			box-sizing: border-box;
			left: 50%;
			transform: translateX(-50%);
		}
	}

	.poster_avater {
		position: relative;
		width: 212rpx;
		height: 272rpx;
		margin: auto;
		margin-top: 114rpx;

		.avater_border {
			position: absolute;
			left: 0;
			top: 0;
			width: 212rpx;
			height: 272rpx;
			z-index: 99;
		}

		.deadee_avater {
			position: absolute;
			width: 180rpx;
			height: 240rpx;
			left: 20rpx;
			top: 20rpx;
		}

		.decoration_top {
			width: 124rpx;
			height: 98rpx;
			position: absolute;
			top: -22rpx;
			right: -40rpx;
		}

		.decoration_bottom {
			width: 148rpx;
			height: 140rpx;
			position: absolute;
			bottom: -24rpx;
			left: -32rpx;
		}
	}

	.poster_title {
		position: relative;
		width: 448rpx;
		height: 72rpx;
		background: linear-gradient(90deg,
				rgba(251, 249, 237, 0) 0%,
				rgba(251, 249, 237, 0.8) 50%,
				rgba(251, 249, 237, 0) 100%);
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		text-align: center;
		font-weight: 500;
		font-size: 32rpx;
		color: #185056;
		line-height: 72rpx;
		margin: auto;
		margin-top: 58rpx;
	}

	.poster_content {
		position: relative;
		width: 622rpx;
		font-weight: 400;
		font-size: 28rpx;
		color: #185056;
		line-height: 42rpx;
		text-align: justified;
		margin: auto;
		margin-top: 54rpx;
		text-indent: 2ch;
	}

	.poster_footerFixed {
		width: 326rpx;
		height: 90rpx;
		position: fixed;
		left: 50%;
		transform: translateX(-50%);
		bottom: calc(env(safe-area-inset-bottom) + 30rpx);
		border: 2rpx solid #88cec2;
		box-sizing: border-box;
		border-radius: 45rpx 45rpx 45rpx 45rpx;
		z-index: 1000;

		.poster_btn {
			position: fixed;
			width: 314rpx;
			height: 78rpx;
			left: 4rpx;
			top: 4rpx;
			border-radius: 45rpx 45rpx 45rpx 45rpx;
			background: linear-gradient(90deg, #ccf8e5 1%, #62b6ae 99%);
			font-size: 32rpx;
			color: #185056;
			line-height: 88rpx;
			letter-spacing: 1px;
			display: flex;
			align-items: center;
			justify-content: center;
			z-index: 1000;
		}

		.decoration {
			position: absolute;
			right: -46rpx;
			top: -42rpx;
			width: 124rpx;
			height: 142rpx;
		}

		image {
			width: 42rpx;
			height: 56rpx;
			margin-right: 8rpx;
		}
	}

	.funcList {
		display: flex;
		width: 100%;
		padding: 0 48rpx;
		box-sizing: border-box;
		font-size: 26rpx;
		color: #0e0e0e;
		line-height: 30rpx;
		padding-bottom: 45rpx;

		.fun {
			display: flex;
			flex-direction: column;
			align-items: center;
			margin-right: 52rpx;
		}

		image {
			width: 96rpx;
			height: 96rpx;
			margin-bottom: 16rpx;
		}
	}

	.model_content {
		font-weight: 400;
		font-size: 26rpx;
		color: #000000;
		line-height: 36rpx;
		text-align: center;
	}

	.memorialList {
		margin: 40rpx 32rpx 0;
		height: 900rpx;

		.memory {
			width: 100%;
			height: 224rpx;
			background: linear-gradient(225deg, #292b2a 0%, #8a918e 100%);
			border-radius: 8rpx 8rpx 8rpx 8rpx;
			padding: 24rpx 16rpx 24rpx 24rpx;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 24rpx;
		}

		image {
			width: 132rpx;
			height: 176rpx;
			border-radius: 7rpx 7rpx 7rpx 7rpx;
			margin-right: 24rpx;
		}

		.name {
			font-weight: 500;
			font-size: 28rpx;
			color: #ffffff;
			line-height: 33rpx;
			width: 100rpx;
		}

		.selectIcon {
			width: 56rpx;
			height: 56rpx;
		}
	}

	.memory_empty {
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		height: 516rpx;
		box-sizing: border-box;

		image {
			width: 330rpx;
			height: 252rpx;
		}

		view {
			font-weight: 400;
			font-size: 28rpx;
			color: #999999;
			line-height: 42rpx;
			margin-top: 32rpx;
		}
	}

	.add_memory_image {
		width: 40rpx;
		height: 40rpx;
		margin-right: 4rpx;
	}
</style>